import React, { useState,useEffect } from 'react';
import * as service from '../../../../api/zynindex'
import { PlusOutlined, HomeOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { Button, Layout, Input, theme, Table, Space, Tag, Modal,Form ,Select,DatePicker} from 'antd';
import '../Borrow/Borrow.scss'
const { Content } = Layout;
const { Search } = Input;
const { Option } = Select;
const { RangePicker } = DatePicker;

interface Props{

}

function Borrow(props:Props) {
    const {
        token: { colorBgContainer },
    } = theme.useToken();
    const onSearch = (value: string) => console.log(value);

        // 跳转路由到新增页面
    var navigate = useNavigate();
    var toNew = () => {
        navigate('/index/assets/assetmanagement/assetInventory/addinventory')
    }

    var [tableData, setTableData] = useState([
        {
            // key: '1',
            // name: 'John Brown',
            // age: 32,
            // address: 'New York No. 1 Lake Park',
            // tags: ['nice', 'developer'],
        },

    ])

    
    // 删除盘点

    var handleClick=async (id:any)=>{
        var res=await service.delete_check({id})
        console.log(res);
        setTableData(res.data);
        borrow_list();
    }
    const columns:any = [
        {
            title: '借用单号',
            dataIndex: 'number',
            key: 'number',
            width:100,
            align:'center',
            render: (_: any, record: any) => <a>{record.number}</a>,
        },
        {
            title: '预计归还时间',
            dataIndex: 'date',
            key: 'date',
            width:150,
            align:'center',
            render: (_: any, record: any) => <div>{record.date}</div>
        },
        {
            title: '资产明细',
            dataIndex: 'detail',
            key: 'detail',
            width:250,
            align:'center',
            render: (_: any, record: any) =><div color="green">{record.detail}</div>
        },
        {
            title: '借用部门',
            dataIndex: 'part',
            key: 'part',
            width:150,
            align:'center',
            render: (_: any, record: any) => <div>{record.part}</div>
        },
        {
            title: '借用人',
            dataIndex: 'people_name',
            key: 'people_name',
            width:70,
            align:'center',
            render: (_: any, record: any) => <div>{record.people_name}</div>
        },
        {
            title: '借用日期',
            dataIndex: 'bdate',
            key: 'bdate',
            width:150,
            align:'center',
            render: (_: any, record: any) => <div>{record.bdate}</div>
        },
        {
            title: '数量',
            dataIndex: 'shu',
            key: 'shu',
            width:100,
            align:'center',
            render: (_: any, record: any) => <div>{record.shu}</div>
        },
        {
            title: '购入金额(元)',
            dataIndex: 'price',
            key: 'price',
            width:100,
            align:'center',
            render: (_: any, record: any) => <div>{record.price}</div>
        },
        {
            title: '经办人',
            dataIndex: 'people',
            key: 'people',
            width:70,
            align:'center',
            render: (_: any, record: any) => <div>{record.people}</div>
        },
    ]
    const [modal2Open, setModal2Open] = useState(false);

    // 资产盘点
    var borrow_list = async () => {
        var res = await service.borrow_list();
        // console.log(res);
        //遍历每个商品id, 给它添加key属性
        res.data.map((item: any) => {
            item.key = item.proid;
        })
        setTableData(res.data);
    }
    useEffect(() => {
        borrow_list();
    }, [])
    return (
        <div className='borrow'>
                  <Content
                style={{
                    padding: 24,
                    margin: 0,
                    minHeight: 280,
                    background: colorBgContainer,
                }}
            >
                <div className="shang">
                    <div className="line"> </div>
                    <div className="set">借用</div>
                </div>
                <div className="search-btn">
                   <div className="left">
                    <div className="t1">借用部门</div>
                          <Form  style={{ maxWidth: 200 }}>
                                <Form.Item rules={[{ required: true }]} >
                                    <Select
                                    placeholder="请选择"
                                    allowClear
                                    >
                                    <Option value="male">产品部</Option>
                                    <Option value="female">研发部</Option>
                                    <Option value="other">生产部</Option>
                                    </Select>
                                </Form.Item>
                         </Form>
                         <div className="t2">领用日期</div>
                         <Form>
                            <Form.Item>
                                <RangePicker />
                                </Form.Item>
                            </Form>
                   <Search placeholder="请输入关键字" onSearch={onSearch} style={{ width: 300 }} />
                   </div>
                    <div className="btn">
                        <Button type="primary" onClick={()=>{toNew()}}><PlusOutlined /> 新增借用</Button>
                        <Button >导出</Button>
                    </div>
                </div>
                <Table columns={columns} dataSource={tableData} />
                {/* <Modal
                    title="Vertically centered modal dialog"
                    centered
                    open={modal2Open}
                    onOk={() => setModal2Open(false)}
                    onCancel={() => setModal2Open(false)}
                >
                    <p>some contents...</p>
                    <p>some contents...</p>
                    <p>some contents...</p>
                </Modal> */}
            </Content>
        </div>
    );
}

export default Borrow;